<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>packages/my-dv-menu/Menu.vue - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-$ui_dv_my-dv-bar.html">$ui/dv/my-dv-bar</a></li><li><a href="module-$ui_dv_my-dv-box.html">$ui/dv/my-dv-box</a></li><li><a href="module-$ui_dv_my-dv-fill.html">$ui/dv/my-dv-fill</a></li><li><a href="module-$ui_dv_my-dv-geo.html">$ui/dv/my-dv-geo</a></li><li><a href="module-$ui_dv_my-dv-icon.html">$ui/dv/my-dv-icon</a></li><li><a href="module-$ui_dv_my-dv-indicator.html">$ui/dv/my-dv-indicator</a></li><li><a href="module-$ui_dv_my-dv-line.html">$ui/dv/my-dv-line</a></li><li><a href="module-$ui_dv_my-dv-list.html">$ui/dv/my-dv-list</a></li><li><a href="module-$ui_dv_my-dv-loading.html">$ui/dv/my-dv-loading</a></li><li><a href="module-$ui_dv_my-dv-menu.html">$ui/dv/my-dv-menu</a></li><li><a href="module-$ui_dv_my-dv-page.html">$ui/dv/my-dv-page</a></li><li><a href="module-$ui_dv_my-dv-pictorial.html">$ui/dv/my-dv-pictorial</a></li><li><a href="module-$ui_dv_my-dv-pie.html">$ui/dv/my-dv-pie</a></li><li><a href="module-$ui_dv_my-dv-progress.html">$ui/dv/my-dv-progress</a></li><li><a href="module-$ui_dv_my-dv-radar.html">$ui/dv/my-dv-radar</a></li><li><a href="module-$ui_dv_my-dv-rank.html">$ui/dv/my-dv-rank</a></li><li><a href="module-$ui_dv_my-dv-ring.html">$ui/dv/my-dv-ring</a></li><li></li><li><a href="module-$ui_dv_my-dv-screen.html">$ui/dv/my-dv-screen</a></li><li><a href="module-$ui_dv_my-dv-starry.html">$ui/dv/my-dv-starry</a></li><li><a href="module-$ui_dv_my-dv-text.html">$ui/dv/my-dv-text</a></li><li><a href="module-$ui_dv_my-dv-title.html">$ui/dv/my-dv-title</a></li></ul><h3>Events</h3><ul><li><a href="module-$ui_dv_my-dv-menu.html#~event:click">click</a></li></ul><h3>Global</h3><ul><li><a href="global.html#darken">darken</a></li><li><a href="global.html#fade">fade</a></li><li><a href="global.html#getCircleRadianPoint">getCircleRadianPoint</a></li><li><a href="global.html#getColorByKeyword">getColorByKeyword</a></li><li><a href="global.html#getColorFromRgbValue">getColorFromRgbValue</a></li><li><a href="global.html#getOpacity">getOpacity</a></li><li><a href="global.html#getRgbaValue">getRgbaValue</a></li><li><a href="global.html#getRgbValue">getRgbValue</a></li><li><a href="global.html#getRgbValueFromHex">getRgbValueFromHex</a></li><li><a href="global.html#getRgbValueFromRgb">getRgbValueFromRgb</a></li><li><a href="global.html#lighten">lighten</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#toHex">toHex</a></li><li><a href="global.html#toRgb">toRgb</a></li><li><a href="global.html#validator">validator</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">packages/my-dv-menu/Menu.vue</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;Box class="my-dv-menu"
       :style="styles"
       v-bind="$attrs"
       v-on="$listeners">
    &lt;MyDvMenuItem v-for="(item,index) in data"
                  :key="`my-dv-menu-item-${item.key}-${index}`"
                  :icon="item.icon"
                  :text="item.text"
                  :width="item.width"
                  :height="svgHeight"
                  @click.native.stop="handleClick(item, index)"
                  :active="(item.key &amp;&amp; item.key ===defaultActive) || index ===defaultActive"
                  :light="light"
                  :dark="dark"
                  :reverse="reverse"
                  :stroke-width="strokeWidth">
      &lt;slot v-bind="{item, index}">&lt;/slot>
    &lt;/MyDvMenuItem>
  &lt;/Box>
&lt;/template>

&lt;script>

  /**
   * 导航菜单
   * @module $ui/dv/my-dv-menu
   */
  import MyDvMenuItem from './MenuItem'
  import Box from '../my-dv-box'
  import Rect from '../../mixins/Rect'
  import Color from '../../mixins/Color'

  /**
   * 插槽
   * @member slots
   * @property {string} default 作用域插槽，参数：item 菜单项对象，index 菜单项索引
   *
   */
  export default {
    name: 'MyDvMenu',
    mixins: [Rect, Color],
    inheritAttrs: false,
    components: {
      Box,
      MyDvMenuItem
    },
    /**
     * 属性参数
     * @member props
     * @property {Object[]} [data] 菜单项对象数组
     * @property {string|number} [data.key] 菜单项标识
     * @property {string} [data.text] 菜单项文本
     * @property {string|object} [data.icon] 图标配置
     * @property {string} [data.to] 跳转路由path，router为true时有效
     * @property {number} [data.width] 菜单项宽度，默认 200
     * @property {boolean} [reverse] 水平翻转
     * @property {boolean} [router] 开启路由跳转
     * @property {number} [strokeWidth=1] 描边宽度
     * @property {string|number} [defaultActive] 默认选择菜单项目，可以设置菜单项的key或索引
     */
    props: {
      // {key, text,icon, to, width}
      data: {
        type: Array
      },
      // 水平翻转
      reverse: Boolean,
      // 路由模式
      router: Boolean,
      // 描边宽度
      strokeWidth: {
        type: Number,
        default: 1
      },
      // 当前选择菜单项
      defaultActive: [String, Number]
    },
    computed: {
      styles() {
        return {
          opacity: this.opacity
        }
      },
      svgHeight() {
        return this.$attrs.height ? Number.parseInt(this.$attrs.height) : undefined
      }
    },
    methods: {
      handleClick(item, index) {
        if (this.router &amp;&amp; this.to &amp;&amp; this.$router) {
          this.$router.push(this.to)
        }
        /**
         * 点击菜单时触发
         * @event click
         * @param {object} item 菜单项对象
         * @param {number} index 菜单项索引
         */
        this.$emit('click', item, index)
      }
    }
  }
&lt;/script>

&lt;style lang="scss">
  @import "../../style/vars";

  @include b(dv-menu) {
    white-space: nowrap;
  }

&lt;/style>
</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Thu Dec 17 2020 13:42:25 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
